import React from 'react';
import PropTypes from 'prop-types';
import { PopConfirm } from '@teamix/ui';

export default class BallonConfirm extends React.Component {
  static propTypes = {
    okFn: PropTypes.func,
    cancelFn: PropTypes.func,
  };

  static defaultProps = {
    okFn: () => {},
    cancelFn: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      submitting: false,
    };
  }

  onConfirm = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (this.state.submitting) {
      return;
    }
    this.props.okFn((data) => {
      this.setState({
        ...data,
      });
    });
  };

  onCancel = (e) => {
    e.preventDefault();
    e.stopPropagation();
    this.setState({
      visible: false,
    });
    this.props.cancelFn();
  };

  onVisibleChange = (visible, type) => {
    // 点击其他地方不关闭，组件不支持？
    if (type === 'docClick') {
      return;
    }
    this.setState({
      visible,
    });
  };

  render() {
    const { visible, submitting } = this.state;
    const { okFn, cancelFn, ...others } = this.props;
    return (
      <PopConfirm
        {...others}
        onConfirm={this.onConfirm}
        onCancel={this.onCancel}
        visible={visible}
        onVisibleChange={this.onVisibleChange}
        confirmProps={{ loading: submitting }}
      />
    );
  }
}
